<?php
session_start();//开启session
?>
<!DOCTYPE html>
<html>
    <head>
        <title>员工列表</title>
        <meta charset="utf-8" />
        <link type="text/css" rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="../bootstrap/js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
        <style type="text/css">
        .form-group{line-height: 35px;}
        </style>
        <script type="text/javascript">
        $(function(){
        	searchEmp();
            //加载所以部门 填入按部门搜索的下拉列表中
            $.getJSON("../index.php?c=Employee&a=loadAllDept",function(data){
                for(var i=0;i<data.length;i++){
                    $("#searchDeptid").append("<option value='"+data[i].deptid+"'>"+data[i].deptName+"</option>");
                }
            });
            //搜索按钮点击事件
            $("#btn-search").click(function(){
            	$("#pageNo").val("1");
            	searchEmp();
            });
            //清空按钮点击事件
            $("#btn-reset").click(function(){
                $("#searchForm")[0].reset();
                //$("#btn-search").click();
                $("#btn-search").trigger("click");
            });
        });

        //搜索员工
        function searchEmp(){
        	var param = $("#searchForm").serialize();
            $.post("../index.php", param,function(data){
            	$("#empData").empty();
                for(var i=0;i<data.rows.length;i++){
                    $("#empData").append("<tr>"+
                            "<td>"+data.rows[i].empid+"</td>"+
                            "<td>"+data.rows[i].empName+"</td>"+
                            "<td>"+data.rows[i].age+"</td>"+
                            "<td>"+(data.rows[i].gender==1?"男":"女")+"</td>"+
                            "<td>"+data.rows[i].phone+"</td>"+
                            "<td>"+data.rows[i].email+"</td>"+
                            "<td>"+data.rows[i].deptName+"</td>"+
                            "<td>"+data.rows[i].entryDate+"</td></tr>");
                }
                $("#pageNo").val(data.pageNo);
                $("#pageSize").val(data.pageSize);
                $("#total").val(data.total);
            },"json");
        }
        //翻页
        function changePage(toPageNo){
        	var pageNo = $("#pageNo").val();
        	var pageSize = $("#pageSize").val();
        	var total = $("#total").val();
            var pageCount = total%pageSize==0?total/pageSize:Math.floor(total/pageSize)+1;
            if(toPageNo <= -1){//上一页
                if(pageNo == 1){
                    alert("当前已经显示第一页，不能翻上一页！");
                    return;
                }
                $("#pageNo").val(pageNo-1);
            }else if(toPageNo == 0){//下一页
            	if(pageNo == pageCount){
                    alert("当前已经显示最后一页，不能翻下一页！");
                    return;
                }
                $("#pageNo").val(parseInt(pageNo)+1);
            }else if(toPageNo > 0){//翻到指定页
                if(toPageNo > pageCount){
                    alert("当前数据共"+pageCount+"页，不能翻到第"+toPageNo+"页");
                    return;
                }
            	$("#pageNo").val(toPageNo);
            }
            searchEmp();
        }
        </script>
    </head>
    <body>
        <input type="hidden" id="total" />
        <table class="table table-bordered table-striped table-hover">
            <caption>
                <form id="searchForm">
                    <input type="hidden" name="pageNo" value="1" id="pageNo" />
                    <input type="hidden" name="pageSize" value="10" id="pageSize" />
                    <input type="hidden" name="c" value="Employee" />
                    <input type="hidden" name="a" value="queryEmployee" />
                    <div class="form-group col-md-2">
                        <input type="text" name="searchEmpName" placeholder="按姓名搜索" class="form-control" />
                    </div>
                    <div class="form-group col-md-2">
                        <select class="form-control" name="searchDeptid" id="searchDeptid">
                            <option value="0">按部门搜索</option>
                        </select>
                    </div>
                    <div class="form-group col-md-2" style="width:100px;">
                        <input type="radio" value="1" name="searchGender" />男&nbsp;&nbsp;&nbsp;
                        <input type="radio" value="2" name="searchGender" />女
                    </div>
                    <div class="form-group col-md-6">
                        <button type="button" id="btn-search" class="btn btn-danger"><i class="glyphicon glyphicon-search"></i>&nbsp;搜索</button>
                        <button type="button" id="btn-reset" class="btn btn-default">清空</button>
                    </div>
                </form>
            </caption>
            <thead>
                <tr>
                    <th>员工编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>所属部门</th>
                    <th>入职日期</th>
                </tr>
            </thead>
            <tbody id="empData"></tbody>
        </table>
        <nav aria-label="Page navigation" class="text-center">
            <ul class="pagination">
                <li><a href="javascript:changePage(-1);" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                <li><a href="javascript:changePage(1);">1</a></li>
                <li><a href="javascript:changePage(2);">2</a></li>
                <li><a href="javascript:changePage(3);">3</a></li>
                <li><a href="javascript:changePage(4);">4</a></li>
                <li><a href="javascript:changePage(5);">5</a></li>
                <li><a href="javascript:changePage(0);" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
            </ul>
        </nav>
    </body>
</html>